<template>
  <div class="add-product-form">
    <!-- 选项卡切换按钮 -->
    <el-button
      v-for="(tab, index) in tabs"
      :key="index"
      :type="activeTab === index ? 'primary' : 'default'"
      @click="activeTab = index"
    >{{ tab.name }}</el-button>
    <!-- 添加总提交按钮 -->
    <el-button type="primary" style="margin-left: 20px;" @click="handleSubmit">
      提交全部表单
    </el-button>

    <!-- 基本信息部分 -->
    <el-form v-if="activeTab === 0" :model="basicForm" label-width="100px">
      <el-form-item label="商品名称" prop="productName">
        <el-input v-model="basicForm.productName" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品类目" prop="category">
        <el-select v-model="basicForm.category" placeholder="请选择">
          <el-option v-for="category in categoryList"
                     :key="category"
                     :label="category"
                     :value="category" />
        </el-select>
        <el-button type="text" @click="handleAddCategory">新增商品类别</el-button>
      </el-form-item>
      <el-form-item label="商品分类" prop="productType">
        <el-select v-model="basicForm.productType" placeholder="请选择">
          <el-option v-for="type in productTypeList"
                     :key="type"
                     :label="type"
                     :value="type" />
        </el-select>
        <el-button type="text" @click="handleAddProductType">新增商品分类</el-button>
      </el-form-item>

      <el-form-item label="单位" prop="unit">
        <el-select v-model="basicForm.unit" placeholder="请选择单位">
          <el-option v-for="unit in unitList"
                     :key="unit"
                     :label="unit"
                     :value="unit" />
        </el-select>
        <el-button type="text" @click="handleAddUnit">新增单位</el-button>
      </el-form-item>
      <el-form-item label="商品属性" prop="attribute">
        <el-select v-model="basicForm.attribute" placeholder="请选择">
          <el-option label="标品" value="standard" />
          <el-option label="非标品" value="nonStandard" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio v-model="basicForm.status" label="上架">上架</el-radio>
        <el-radio v-model="basicForm.status" label="下架">下架</el-radio>
      </el-form-item>
      <!-- 商品图片 -->
      <el-form-item label="商品图片" prop="productImage">
        <el-upload
          v-model="basicForm.productImage"
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :before-upload="beforeUpload"
          :http-request="requestUpload"
        >
          <img v-if="basicForm.productImage" :src="basicForm.productImage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
            点击上传商品图片
            <span  style="color: #f56c6c; margin-left: 10px;">(请先保存商品基本信息)</span>
          </div>
        </el-upload>
        <!-- 编辑图片按钮 -->
        <el-button
          type="primary"
          @click="editCropper"
          style="margin-left: 10px;"
        >
          编辑图片
        </el-button>
        <!-- 上传按钮 -->
        <el-button
          type="primary"
          @click="uploadImg"
          style="margin-left: 10px;"
        >
          上传图片
        </el-button>
      </el-form-item>
    </el-form>

    <!-- 图片裁剪弹窗相关代码 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body @opened="modalOpened"  @close="closeDialog">
      <el-row>
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <!-- 图片预展示 -->
          <vue-cropper
            ref="cropper"
            :img="options.img"
            :info="true"
            :autoCrop="options.autoCrop"
            :autoCropWidth="options.autoCropWidth"
            :autoCropHeight="options.autoCropHeight"
            :fixedBox="options.fixedBox"
            :outputType="options.outputType"
            @realTime="realTime"
          />
        </el-col>
        <!-- 右侧预览区域：展示裁剪后的图片预览 -->
        <el-col :xs="24" :md="12" :style="{height: '350px'}">
          <div class="avatar-upload-preview">
            <!-- 使用 vue-cropper 提供的实时预览数据 -->
            <img :src="previews.url" :style="previews.img" alt="图片预览" />
          </div>
        </el-col>
      </el-row>
      <br />

      <el-row>
        <!-- 选择图片 -->
        <el-col :lg="2" :sm="3" :xs="3">
          <el-upload action="#" :http-request="requestUpload" :show-file-list="false" :before-upload="beforeUpload">
            <el-button size="small">
              选择
              <i class="el-icon-upload el-icon--right"></i>
            </el-button>
            <el-col :lg="{span: 2, offset: 6}" :sm="2" :xs="2">
              <el-button type="primary" size="small" @click="uploadImg()" :disabled="!priceForm.productId">提 交</el-button>
            </el-col>
          </el-upload>
        </el-col>

      </el-row>
    </el-dialog>

    <!-- 价格设置部分 -->
    <el-form v-if="activeTab === 1" :model="priceForm" label-width="100px">
      <el-form-item label="规格" prop="specification">
        <el-select v-model="priceForm.specification" placeholder="请选择">
          <el-option label="300~500斤" value="300~500斤" />
          <el-option label="500斤以上" value="500斤以上" />
        </el-select>
      </el-form-item>
      <el-form-item label="等级" prop="grade">
        <el-select v-model="priceForm.grade" placeholder="请选择">
          <el-option label="一等" value="一等" />
          <el-option label="精品" value="精品" />
        </el-select>
      </el-form-item>
      <el-form-item label="价格" prop="salesPrice" >
        <el-input v-model="priceForm.salesPrice" placeholder="请输入价格" />
      </el-form-item>
    </el-form>

    <!-- 商品详情部分 -->
    <div v-else-if="activeTab === 2">
      <el-input
        type="textarea"
        :rows="10"
        placeholder="请输入商品详情"
        v-model="detailForm.detail"
      />
    </div>
  </div>
</template>

<script>
import { listUnit, listProductType, listProductCategory, addProducts, addPrice, uploadImage } from "@/api/product/addProduct";
import {debounce} from "@/utils";
import store from "@/store";
import { VueCropper } from "vue-cropper";


export default {
  name: 'AddProduct',
  components: {
    VueCropper
  },
  data() {
    return {
      activeTab: 0, // 默认显示基本信息
      tabs: [
        { name: '基本信息' },
        { name: '价格设置' },
        { name: '商品详情' }
      ],
      basicForm: {
        productName: '',
        category: '',
        productType: '',
        unit: '',
        productAttribute: '',
        status: '上架', // 默认上架
        productDetail: '',
        productImage: ''
      },
      // 上传地址
      uploadUrl: process.env.VUE_APP_BASE_API + '/product/upload/image',
      // 价格设置
      priceForm: {
        isMultiSpec: false,
        productId: '',
        specification: '',  // 规格
        grade: '', // 等级
        salesPrice: '', // 价格
      },
      // 商品详情
      detailForm: {
        detail: ''
      },
      // 单位
      unitList: [],
      // 价格
      fileList: [],
      // 商品分类
      productTypeList: [],
      // 商品类目
      categoryList: [],
      // 是否显示弹出层
      open: false,
      // 弹出层标题
      title: "上传商品图片",
      options: {
        img: '',  //裁剪图片的地址
        autoCrop: true,             // 是否默认生成截图框
        autoCropWidth: 200,         // 默认生成截图框宽度
        autoCropHeight: 200,        // 默认生成截图框高度
        fixedBox: true,             // 固定截图框大小 不允许改变
        outputType:"png",           // 默认生成截图为PNG格式
        filename: 'product'          // 文件名称
      },
      previews: {},
      resizeHandler: null
    }
  },
  created() {
    this.getUnit();
    this.getProductType();
    this.getProductCategory();
  },
  methods: {
    handleSubmit() {
      //将商品详情添加到基本信息中
      this.basicForm.productDetail = this.detailForm.detail;
      // 提交所有表单数据
      console.log('提交所有表单数据：', this.basicForm, this.detailForm);
      addProducts(this.basicForm).then(res => {
        this.$message.success('添加成功');
        console.log(res);
        //将res.data中的productId添加到priceForm中
        this.priceForm.productId = res.data;
        addPrice(this.priceForm).then(res => {
          this.$message.success('添加成功');
        }).catch(err => {
          this.$message.error(err.message);
        })
      }).catch(err => {
        this.$message.error(err.message);
      })

    },
    //查所有单位
    getUnit() {
      listUnit().then(res => {
        this.unitList = res.data;
        console.log("单位", res.data);
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //新增单位
    async handleAddUnit() {
      try {
        const { value } = await this.$prompt('请输入新的单位', '新增单位', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: ''
        })
        // 提取用户输入值并去除空格
        const newUnit = value.trim();
        // 验证输入不为空
        if (!newUnit) {
          this.$message.warning('单位名称不能为空');
          return;
        }
        // 验证单位不存在
        if (this.unitList.includes(newUnit)) {
          this.$message.warning('该单位已存在');
          return;
        }
        // 添加到单位列表
        this.unitList.push(newUnit);
        this.$message.success('单位添加成功');
      } catch (e) {
        // 用户取消操作时不做处理
      }
    },
    //查询商品分类
    getProductType() {
      listProductType().then(res => {
        this.productTypeList = res.data;
        console.log("商品分类", res.data);
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //新增商品分类
    async handleAddProductType() {
      try {
        const { value } = await this.$prompt('请输入新的商品分类', '新增商品分类', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: ''
        })
        // 提取用户输入值并去除空格
        const newProductType = value.trim();
        // 验证输入不为空
        if (!newProductType) {
          this.$message.warning('商品分类名称不能为空');
          return;
        }
        // 验证商品分类不存在
        if (this.productTypeList.includes(newProductType)) {
          this.$message.warning('该商品分类已存在');
          return;
        }
        // 添加到商品分类列表
        this.productTypeList.push(newProductType);
        this.$message.success('商品分类添加成功');
      } catch (e) {
        // 用户取消操作时不做处理
      }
    },
    //查询商品类目·
    getProductCategory() {
      listProductCategory().then(res => {
        this.categoryList = res.data;
        console.log("商品类目", res.data);
      }).catch(err => {
        this.$message.error(err.message);
      })
    },
    //新增商品类目
    async handleAddCategory() {
      try {
        const {value} = await this.$prompt('请输入新的商品类目', '新增商品类目', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputValue: ''
        })
        // 提取用户输入值并去除空格
        const newCategory = value.trim();
        // 验证输入不为空
        if (!newCategory) {
          this.$message.warning('商品类目名称不能为空');
          return;
        }
        // 验证商品类目不存在
        if (this.categoryList.includes(newCategory)) {
          this.$message.warning('该商品类目已存在');
          return;
        }
        // 添加到商品类目列表
        this.categoryList.push(newCategory);
        this.$message.success('商品类目添加成功');
      } catch (e) {
        // 用户取消操作时不做处理
      }
    },
    // 编辑商品图片
    editCropper() {
      this.open = true
    },
    // 打开弹出层结束时的回调
    modalOpened() {
      if (!this.resizeHandler) {
        this.resizeHandler = debounce(() => {
          if (this.$refs.cropper) {
            this.$refs.cropper.refresh()
          }
        }, 100)
      }
      window.addEventListener("resize", this.resizeHandler)
    },
    // 刷新组件
    refresh() {
      if (this.$refs.cropper) {
        this.$refs.cropper.refresh()
      }
    },
    // 覆盖默认的上传行为
    requestUpload() {
    },
    // 向左旋转
    rotateLeft() {
      if (this.$refs.cropper) {
        this.$refs.cropper.rotateLeft()
      }
    },
    // 向右旋转
    rotateRight() {
      if (this.$refs.cropper) {
        this.$refs.cropper.rotateRight()
      }
    },
    // 图片缩放
    changeScale(num) {
      if (this.$refs.cropper) {
        num = num || 1
        this.$refs.cropper.changeScale(num)
      }
    },
    // 上传预处理--选择的文件
    beforeUpload(file) {
      if (file.type.indexOf("image/") == -1) {
        this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。")
        return false;
      } else {
        const reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
          this.options.img = reader.result
          this.options.filename = file.name
        }
        return false;
      }
    },
    // 上传图片
    uploadImg() {
      // 检查productId是否存在
      if (!this.priceForm.productId) {
        this.$modal.msgError('请先保存商品基本信息');
        return;
      }
      if (this.$refs.cropper) {
        this.$refs.cropper.getCropBlob(data => {
          console.log("data", data)
          // 创建对象
          let formData = new FormData()
          //参数是文件名
          formData.append("avatarfile", data, this.options.filename)

          // 传递productId参数给后端
          const params = {
            productId: this.priceForm.productId
          }

          // 使用商品图片上传API
          uploadImage(formData, params).then(response => {
            this.open = false
            this.options.img = response.imgUrl
            // 更新商品图片字段
            this.basicForm.productImage = response.imgUrl
            this.$modal.msgSuccess("图片上传成功")
            this.visible = false
          })
        })
      }
    },
    // 实时预览
    realTime(data) {
      this.previews = data
    },
    // 关闭窗口
    closeDialog() {
      // 如果已有商品图片，保留它；否则使用默认图片
      if (!this.basicForm.productImage) {
        this.options.img = '';
      }
      window.removeEventListener("resize", this.resizeHandler)
    }
  }
}
</script>

<style scoped>
.add-product-form {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
}
.el-button {
  margin-right: 10px;
  margin-bottom: 10px;
}
.el-table {
  margin-top: 10px;
}
</style>
